<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录</title>
    <link rel="stylesheet" href="node_modules/element-ui/lib/theme-chalk/index.css">
    <style>
        section {
            width: 350px;
            height: 300px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto
        }

        fieldset {
            border: 0;
        }

        .login-components {
            margin-top: 10px;
        }

        .buttonGroup {
            text-align: right;
        }
    </style>
</head>

<body>
    <main id="app" v-cloak>
        <el-alert v-show="message!=''" :title="message" type="error" show-icon></el-alert>
        <section>
            <aside style="text-align: center;">
                <el-avatar :size="110" fit="fill">
                    <img src="images/logo.jpg" style="width:110px;height:120px" />
                </el-avatar>
            </aside>
            <article class="login__main">
                <el-form :model="userForm">
                    <fieldset>
                        <legend hidden>用户登录</legend>
                        <el-input v-model="userForm.userName" placeholder="请输入用户名" class="login-components"></el-input>
                        <el-input v-model="userForm.password" placeholder="请输入密码" show-password
                            class="login-components">
                        </el-input>
                        <el-switch v-model="userForm.selected" active-text="一周之内免登录" active-color="#13ce66"
                            inactive-color="#ff4949" class="login-components">
                        </el-switch>
                        <nav class="buttonGroup login-components">
                            <el-button type="primary" v-on:click="doRegister">注册</el-button>
                            <el-button type="primary" v-on:click="doLogin">登录</el-button>
                        </nav>
                    </fieldset>
                </el-form>
            </article>
        </section>
    </main>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/element-ui/lib/index.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>
<script src="js/conf.js" type="module"></script>
<script type="module">
    import conf from '../js/conf.js';
    new Vue({
        el: '#app',
        data() {
            return {
                userForm: {
                    userName: '',
                    password: '',
                    selected: false,
                },
                message: ''
            }
        },
        methods: {
            doRegister: function () {
                window.location.href = "register.html";
            },
            async doLogin() {
                this.userForm.param = 'login';
                const options = {
                    xhrFields: {
                        withCredentials: true //允许携带cookie
                    },
                    method: 'POST',
                    headers: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: this.userForm,
                    url: conf.BASE_URL+'api/user',
                };
                try {
                    let response = await axios(options);
                    if (response.data.result == 'ok') {
                        window.location.href = "views/main.html";
                    } else {
                        this.message = response.data.message;
                    }
                } catch (error) {
                    console.log(error);
                }
            }
        }
    })
</script>

</html>